<template>
  <div :class="style.card">
    <h1>子应用👇vitevue3</h1>
    <!-- name：应用名称, url：应用地址 -->
    <div :class="style.content">
      <a-spin :indicator="indicator" :spinning="spinning" :class="style.spinningLoading"/>
      <!-- <a-spin :spinning="spinning"> -->
      <div>
        <micro-app :class="style.microApp" name="vitevue3" url="http://localhost:3004/" iframe="true" />
      </div>
      <!-- </a-spin> -->
    </div>
  </div>
</template>
<script setup>
import { useCssModule, onMounted, ref } from 'vue'
const spinning = ref(true);

const style = useCssModule()
onMounted(() => {
  const myApp = document.querySelector('micro-app[name=vitevue3]')

  myApp.addEventListener('created', () => {
    spinning.value = true;
    console.log('created')
  })

  myApp.addEventListener('beforemount', () => {
    spinning.value = true;
    console.log('beforemount')
  })

  myApp.addEventListener('mounted', () => {
    spinning.value = false;
    console.log('mounted')
  })

  myApp.addEventListener('unmount', () => {
    console.log('unmount')
  })

  myApp.addEventListener('error', () => {
    console.log('error')
  })
})
</script>
<style module>
.card {
  position: relative;
  border: 1px solid red;
  height: 100%;
  overflow: auto;
}


.content {
  height: calc(100% - 64px);
  overflow: auto;
  position: relative;
}
.spinningLoading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.microApp[name='vitevue3'] {
  height: 100%;
}
</style>
